<template>
  <div class="hello">
    <div>hi</div>
    <div>
      <!-- <keep-alive> -->
      <button-counter></button-counter>
      <!-- </keep-alive> -->
    </div>

  </div>
</template>

<script>
  export default {
    name: 'hi',
    components: {
      'button-counter': {
        data: function () {
          return {
            count: 0
          }
        },
        template: '<button v-on:click="count++">你点击了 {{ count }} 次。</button>'
      }
    },
    beforeCreate() {
      console.log('1-beforeCreate 初始化之后');
    },
    created() {
      console.log('2-created 创建完成');
    },
    beforeMount() {
      console.log('3-beforeMount 挂载之前');
    },
    mounted() {
      console.log('4-mounted 被创建');
    },
    beforeUpdate() {
      console.log('5-beforeUpdate 数据更新前');
    },
    updated() {
      console.log('6-updated 被更新后');
    },
    activated() {
      // 必须在路由导入的页面有效
      console.log('7-activated 进入路由触发');
    },
    deactivated() {
      // 必须在路由导入的页面有效
      console.log('8-deactivated 离开路由触发');
    },
    beforeDestroy() {
      console.log('9-beforeDestroy 销毁之前');
    },
    destroyed() {
      console.log('10-destroyed 销毁之后')
    }
  }

</script>
